@import 'common.less';

@media (min-width: @sreen) {
  html{width: auto;margin: 0 auto;}
}

.nav{
	position: fixed;left: 50%;top: 0;width: 750/@rem;height: 90/@rem;transform: translateX(-50%);z-index: 2;transition: 0.3s linear;
	.logo{
		float: left;height: 90/@rem;line-height: 90/@rem;padding-left: 22/@rem;font-size: 36/@rem;color: #fff;font-weight: bold;
		i{font-size: 60/@rem;vertical-align: -14/@rem;margin-right: 8/@rem}
	}
	.menu-btn{
		float: right;width: 90/@rem;height: 90/@rem;color: #fff;padding: 0 10/@rem 0;box-sizing: border-box;
		span{
			width: 40/@rem;height: 0;border-top: 2px solid #fff;background: #fff;border-radius: 2.5/@rem;display: block;margin:0 auto 8/@rem;
			&:first-child{margin-top: 30/@rem;}
		}
	}
	&.scroll{
		background: #fff;box-shadow: 0 0 6/@rem 6/@rem rgba(0,0,0,0.1);
		.logo{color: #5e6db4;}
		.menu-btn span{background-color: #5e6db4;}
	}
}
.menu{
	position: fixed;left: 50%;top: 0;z-index: 9;width: 750/@rem;height: 100%;transform: translateX(-50%);display: none;
	.list{
		position: absolute;top: 120/@rem;right: 0;background: #fff;width: 180/@rem;padding: 14/@rem 0 22/@rem;box-shadow: -3/@rem 2/@rem 6/@rem 1/@rem rgba(0,0,0,0.1);display: none;
		&:before{content: "";position: absolute;top: -15/@rem;right: 30/@rem;width: 30/@rem;height: 30/@rem;background: #fff;transform: rotate(45deg);box-shadow: -2/@rem -2/@rem 4/@rem 0.5/@rem rgba(0,0,0,0.05);}
		a{
			display: block;height: 80/@rem;line-height: 80/@rem;color: #000;font-size: 28/@rem;text-align: center;position: relative;
			&.active{background: #f0f3f6;}
		}
	}
}

.banner{
	margin: 0 auto;height: 720/@rem;
	.swiper-container {width: 100%;height: 100%;}
    .swiper-slide{text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{bottom: 25/@rem;}
    .swiper-pagination-bullet{opacity: 1;width: 18/@rem;height: 18/@rem;background: url("../img/mobile/banner-pagination.png") no-repeat;background-size: 18/@rem 18/@rem;animation: music linear 1.4s infinite;}
    .swiper-pagination-bullet-active{background-image: url("../img/mobile/banner-pagination-active.png");}
    img{width: 100%;vertical-align: middle;}
    .banner-1{
    	position: relative;width: 100%;height: 100%;
    	.title{position: absolute;top: 467/@rem;left: 0;right: 0;text-align: center;font-size: 42/@rem;line-height: 42/@rem;color: #fff;font-weight: bold;}
    	.summy{position: absolute;top: 523/@rem;left: 130/@rem;right: 130/@rem;text-align: center;font-size: 24/@rem;line-height: 40/@rem;color: #fff;}
    	.btn{width: 280/@rem;height: 70/@rem;line-height: 70/@rem;color: #fff;font-size: 30/@rem;text-align: center;background: #496ad9;border-radius: 35/@rem;position: absolute;left:50%;top: 553/@rem;transform: translateX(-50%);}
    }
}
.introduct{
	width: 750/@rem;height: 900/@rem;margin: 0 auto;background: #f0f3f6;
	.title{font-size: 48/@rem;color: #312727;line-height: 48/@rem;padding-top: 52/@rem;text-align: center;font-weight: bold;}
	.summy{font-size: 24/@rem;color: #999;line-height: 24/@rem;padding-top: 20/@rem;text-align: center;}
	.img{
		text-align: center;padding-top: 70/@rem;
		img{width: 100%;vertical-align: middle;}
	}
}
.service{
	width: 750/@rem;margin: 0 auto;
	.title{font-size: 48/@rem;color: #312727;line-height: 48/@rem;padding-top: 80/@rem;text-align: center;font-weight: bold;}
	.summy{font-size: 24/@rem;color: #999;line-height: 24/@rem;padding-top: 20/@rem;text-align: center;}
	.img{
		text-align: center;padding: 84/@rem 0 124/@rem;
		img{width: 100%;vertical-align: middle;}
	}
}
.module-1{
	width: 750/@rem;height: 300/@rem;margin: 0 auto;background: url("../img/mobile/module-1-bg.jpg");background-size: 750/@rem 300/@rem;padding-top: 10/@rem;
	.title{font-size: 30/@rem;line-height: 45/@rem;text-align: center;width: 600/@rem;margin: 0 auto;color: #fff;padding-top: 40/@rem;}
	.btn{font-size: 30/@rem;line-height: 70/@rem;text-align: center;width: 280/@rem;height: 70/@rem;margin: 28/@rem auto 0;display: block;color: #fff;border-radius: 35/@rem;border: 1px solid #ccc;}
}
.scenes{
	width: 750/@rem;margin: 0 auto;
	.title{font-size: 48/@rem;line-height: 48/@rem;padding-top: 72/@rem;text-align: center;font-weight: bold;}
	.tag{
		width: 690/@rem;border-bottom: 1px solid #d8dbe0;font-size: 0;text-align: center;padding-top: 40/@rem;margin: 0 auto;
		span{
			display: inline-block;width: 100/@rem;font-size: 24/@rem;color: #000;padding: 24/@rem 0;border-bottom: 2px solid #fff;margin: 0 25/@rem;
			&.active{border-bottom-color: #5968a9;}
		}
	}
	.scenes-box{
		width: 750/@rem;height: 710/@rem;position: relative;
		.scenes-box-item{
			width: 750/@rem;height: 710/@rem;position: absolute;left: 0;top: 0;opacity: 0;
			&.active{opacity: 1;z-index: 1;transition: 0.5s linear;}
			.swiper-container {width: 100%;height: 100%;}
		    .swiper-slide{text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
		    .img{
		    	width: 550/@rem;margin: 0 auto;padding: 50/@rem 0 160/@rem;
		    	img{width: 100%;vertical-align: middle;}	
		    }
		    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{bottom: 90/@rem;}
		}
	}
}
.foot{
	width: 750/@rem;background: #36353b;margin: 0 auto;
	.title{font-size: 48/@rem;line-height: 48/@rem;color: #fff;text-align: center;padding-top: 60/@rem;}
	.info{
		padding: 45/@rem 64/@rem 0 79/@rem;color: #999;font-size: 24/@rem;line-height: 40/@rem;
		a{font-size: inherit;color: inherit;}
	}
	.qrcode{
		text-align: center;padding: 60/@rem 0 54/@rem;;
		img{width: 200/@rem;height: 200/@rem;vertical-align: middle;}
		.txt{color: #999;font-size: 24/@rem;line-height: 24/@rem;padding-top: 28/@rem;}
	}
	.bottom{height: 96/@rem;line-height: 96/@rem;text-align: center;color: #999;font-size: 24/@rem;background: #29282d;}
}

.yxq-code{
    position: relative;z-index: 101;display: none;
    .cover-bg{position: fixed;top:0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.5);}
    .cont{
        position: fixed;width: 520/@rem;height: 510/@rem;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #fff;border-radius: 8/@rem;
        .yxq-code-close{position: absolute;font-size: 28/@rem;color: #999;line-height: 60/@rem;width: 50/@rem;text-align: center;top: 0;right: 0;cursor: pointer;}
        .qrcode{
        	text-align: center;margin-top: 20/@rem;
        	img{width: 360/@rem;vertical-align: middle;}
        }
        p{margin-top: 50/@rem;text-align: center;font-size: 28/@rem;}
    }
}